<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane label="页面属性" name="tab-0">
      <div class="right-page edit-handles-con">
        <el-form class="right-page-con">
          <template v-if="isPop">
            <switch-normal v-model="siteAttrs.isPopRandomEffect" label="弹层随机切换效果" @change="onUpdateSiteAttrs"></switch-normal>
            <color-normal v-model="pageAttrs.backgroundColor" label="背景颜色" format="rgb" @change="onChangePageAttrs"></color-normal>
            <switch-normal v-model="pageAttrs.isPopUseSiteBg" label="弹层使用站点背景" @change="onChangePageAttrs"></switch-normal>
            <switch-normal v-model="pageAttrs.isAutoClose" label="自动关闭" @change="onChangePageAttrs"></switch-normal>
            <slider-normal v-if="pageAttrs.isAutoClose" v-model="pageAttrs.delayTime" :min="0" :max="10" :step="1" label="自动关闭时间(s)" @change="onChangePageAttrs"></slider-normal>
          </template>
          <template v-else>
            <add-img-con  class="margin-left-right-16" btnLable="添加图片" :url="attrs.bgUrl" comAttr="attrs" picAttr="bgUrl" :isCrop='true'></add-img-con>
            <input-normal label="背景图片地址" v-model="attrs.bgUrl" @change="onUpdateAttrs"></input-normal>
            <dropdown-normal v-if="attrs.bgUrl && attrs.bgUrl.length > 0" v-model="attrs.bgPositionRepeatType" :valLists="BG_POSITION_REPEAT_TYPES" label="背景位置平铺" @change="onUpdateAttrs"></dropdown-normal>
            <color-normal v-model="attrs.backgroundColor" label="背景颜色" format="rgb" @change="onUpdateAttrs"></color-normal>
            <template v-if="siteStatus.isCurrentPage">
              <template v-if="siteAttrs.h5Type == H5_TYPE.mobile || siteAttrs.h5Type == H5_TYPE.pc">
                <switch-normal v-model="state.isLong" label="页面高度设置" @change="onUpdateSiteLongAttrs"></switch-normal>
                <slider-normal v-if="state.isLong" v-model="pageAttrs.height" :min="MOBILE_WID_HEI.height" :max="30000" :step="10" label="页面高" @change="onChangeHeight"></slider-normal>
              </template>
              <template v-if="siteAttrs.h5Type == H5_TYPE.pc">
                <slider-normal v-model="pageAttrs.width" :min="MOBILE_WID_HEI.minWidth" :max="3000" :step="10" label="页面宽" @change="onChangeWidth"></slider-normal>
              </template>
            </template>
            <template v-if="isSite" >
              <template v-if="!state.isLong">
                <switch-normal v-model="siteAttrs.isNoSwiping" label="单页禁止滑动" @change="onUpdateSiteAttrs"></switch-normal>
                <switch-normal v-if="siteAttrs.isNoSwiping" v-model="siteAttrs.isRandomEffect" label="页面随机切换效果" @change="onUpdateSiteAttrs"></switch-normal>
                <template v-else>
                  <dropdown-normal v-model="siteAttrs.swiper.effect" :valLists="SWIPER_EFFCE" label="切换效果" :bIsBtn="false" @change="onUpdateSiteAttrs" ></dropdown-normal>
                  <switch-normal v-model="siteAttrs.swiper.isTurnPage" label="鼠标滑动翻页" @change="onUpdateSiteAttrs"></switch-normal>
                  <dropdown-normal v-model="siteAttrs.swiper.turnPageMode" :valLists="PAGE_MODE_TYPES" label="翻页模式" @change="onUpdateSiteAttrs"></dropdown-normal>
                  <switch-normal v-model="siteAttrs.swiper.autoTurnPage" label="自动翻页" @change="onUpdateSiteAttrs"></switch-normal>
                  <slider-normal v-if="siteAttrs.swiper.autoTurnPage" v-model="siteAttrs.turnPageTime" :min="0" :max="5" :step="0.1" label="翻页时间" @change="onUpdateSiteAttrs"></slider-normal>
                  <input-normal label="滑动翻页箭头url" placeholder="url,width.height" v-model="siteAttrs.swiper.swiperHintUrl" @change="onUpdateSiteAttrs"></input-normal>
                </template>
              </template>
              <dropdown-normal v-model="siteAttrs.pageId" :valLists="getLists(PAGE_TYPE_.page)" label="默认显示页面" @change="onUpdateSiteAttrs"></dropdown-normal>
              <dropdown-normal v-model="siteAttrs.popId" :valLists="getLists(PAGE_TYPE_.pop)" label="默认显示弹层" @change="onUpdateSiteAttrs"></dropdown-normal>
              <switch-normal v-model="siteStatus.isHighComponentConfiguration" label="高级组件配置" @change="onUpdateSiteStatus"></switch-normal>
              <switch-normal v-model="siteAttrs.isOffline" label="下线(关闭接口上行数据)" @change="onUpdateSiteAttrs"></switch-normal>
              <textarea-normal v-if="siteAttrs.isOffline" v-model="siteAttrs.offlineJumpLink" label="下线跳转链接" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteAttrs.push_visible" label="公开发博内容" @change="onUpdateSiteAttrs"></switch-normal>
              <switch-normal v-model="siteAttrs.isShareWeiboWinxin" label="分享到微博或是微信" @change="onUpdateSiteAttrs"></switch-normal>
              <switch-normal v-model="siteAttrs.isDisplayDebuggerText" label="在移动端显示代码版本" @change="onUpdateSiteAttrs"></switch-normal>
              <textarea-normal v-model="siteAttrs.controlData" label="自定义站点信息" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteStatus.isUploadFile" label="上传文件" @change="onUpdateSiteStatus"></switch-normal>
              <textarea-normal v-model="siteAttrs.loadAssets" label="加载素材" placeholder="图片url,音频url,视频url" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteAttrs.isDisplayAssetsLoading" label="显示素材加载" @change="onUpdateSiteAttrs"></switch-normal>
              <input-normal v-model="siteAttrs.noSwipings" label="不能滑动页面" placeholder="页面id,1,2,8," @change="onUpdateSiteAttrs"></input-normal>
              <input-normal label="图上传大小M" v-model="siteStatus.uploadImgSize" @change="onUpdateSiteStatus"></input-normal>
              <switch-normal v-model="siteStatus.isCopySite" label="本地数据站点复制" @change="onUpdateSiteStatus"></switch-normal>
              <p v-if="siteStatus.isCopySite" style="color:red">使用这个功能需要将站点的数据复制到文本框中，不熟悉的这个功能慎用！！操作错误站点数据不小心被覆盖只能重新做哦！</p>
              <input-normal label="reload时间" placeholder="50" v-model="siteAttrs.reloadTime" @change="onUpdateSiteAttrs"></input-normal>
              <el-form-item label="开始时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="state.sdate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('sdate')"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="state.edate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('edate')"></el-date-picker>
              </el-form-item>
              <switch-normal v-model="siteAttrs.isNotSaveImg" label="长按保存图片(不允许)" @change="onUpdateSiteAttrs"></switch-normal>
            </template>
          </template>
          <input-normal label="页面id" v-model="currentPage.id" disabled="disabled"></input-normal>
          <switch-normal v-model="siteAttrs.isCard166" label="Card166设置" @change="onCreateCardAttrs"></switch-normal>
          <card66 v-if="siteAttrs.isCard166"></card66>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import Card66 from '@/views/right/cards/card166.vue'
import { PAGE_TYPE, MOBILE_WID_HEI, H5_TYPE, SWIPER_EFFCE, PAGE_MODE_TYPES } from '@/const/'
import { BG_POSITION_REPEAT_TYPES, PAGE_TYPE_ } from '@/const/web/'
import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useWebComponentStore } from '@/store/web/component'
import { pushPages, pushPops } from '@/views/ts/'

const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()

const siteAttrs = computed(() => {
  return useWebSite.attrs
})
let siteStatus_: any
const siteStatus = computed(() => {
  siteStatus_ = useWebSite.siteStatus
  return siteStatus_
})
const currentPage = computed(() => {
  return useWebPage.currentPage
})
const tabName = 'page'
const tabNames = computed(() => {
  return useWebComponent.tabNames
})
const pageAttrs = computed(() => {
  return useWebPage.currentPage!.attrs
})
const isSite = () => computed(() => {
  return useWebPage.isSite
})
const attrs = computed(() => {
  if(useWebPage.isSite) {
    return useWebSite.attrs
  } else {
    return useWebPage.currentPage!.attrs
  }
})

const isPop = computed(() => {
  return useWebPage.currentPage!.type == PAGE_TYPE_.pop ? true : false
})

const state = reactive({
  sdate: useWebSite.attrs.sdate,
  edate: useWebSite.attrs.edate,
  isLong: useWebSite.attrs.pageType == PAGE_TYPE.long ? true : false,
})

const onUpdateTab = () => {
  let params = {}
  params[tabName] = useWebComponent.tabNames[tabName]
  useWebComponent.updateTab(params)
}
const onUpdateSiteStatus = () => {
  useWebSite.updateSiteStatus(siteStatus_)
}
const onUpdateSiteLongAttrs = () => {
  if(state.isLong) {
    // siteAttrs.isTurnPage = false
    siteStatus_.isVisiblePhone = false
  }
  useWebSite.updateSiteAttrs(siteStatus_)
}
const onChangeHeight = () => {
  useWebPage.updatePageAttrs({ attrs: { height: useWebPage.currentPage!!.attrs.height } })
}
const onChangeWidth = () => {
  let scale = (window.innerWidth - MOBILE_WID_HEI.leftWidth - MOBILE_WID_HEI.rightWidth - 80) / useWebPage.currentPage!!.attrs.width
  if(scale > 1) {
    scale = 1
  }
  useWebSite.updateSiteScale(scale)
  // useWebPage.updatePageAttrs({ attrs: {width: useWebPage.currentPage!.attrs.width } })
  // nextTick(() => {
  //   EventBus.$emit("refreshScale")
  // })
}
const onUpdateSiteAttrs = () => {
  useWebSite.updateSiteAttrs(useWebSite.attrs)
}
const onUpdateAttrs = () => {
  if(useWebPage.isSite) {
    // useWebSite.updateSiteAttrs(useWebSite.attrs)
  } else {
    // useWebPage.updatePageAttrs({ attrs: useWebPage.currentPage!.attrs })
  }
}
const onChangePageAttrs = () => {
  // useWebPage.updatePageAttrs({ attrs: useWebPage.currentPage!.attrs })
}
const getLists = (index: number) => {
  let list: any[] = []
  if(index == PAGE_TYPE_.pop){
    pushPops(list)
  } else {
    pushPages(list)
  }
  return list
}

const onChangeDate = (str: string) => {
  siteStatus_[str] = state[str]
  onUpdateSiteAttrs()
}


const onCreateCardAttrs = () => {
  if(useWebSite.attrs.isCard166) {
    useWebSite.createCardAttrs()
  }
}

watch(
  () => state.isLong,
  (newVal, oldVal) => {
    if(!newVal){
      useWebPage.currentPage!.attrs.height = MOBILE_WID_HEI.height
      onChangeHeight()
    }
    useWebSite.attrs.pageType = newVal ? PAGE_TYPE.long : PAGE_TYPE.single
  },
  { immediate: true }
)
</script>


<style lang="scss">
.right-page {
  color: #43475c;
  font-size: 14px;

  h1{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #43475C;
    background: #F3F5FA;
    font-weight: bold;
  }
  .right-page-con {
    margin-top: 10px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active:hover {
    background-color: transparent;
    border: none;
    color: #000;
  }
}
</style>
